<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>

<body>

    <div>
        <button class="layui-btn layui-btn-normal" id="addstu">添加用户</button>
        <form class="layui-form" onsubmit="return false" style="display:inline-block">
            <div class="layui-form-item">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="tel" id="txtKey" placeholder="请输入关键字" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">

                        <div class="layui-input-inline">
                            <button class="layui-btn" lay-submit id="btnSubmit">查询</button>
                            <button class="layui-btn" lay-submit id="btnReset">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <table id="stus"></table>

    <script src="../../js/lodash.min.js"></script>
    <script src="../../js/mock-min.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-1.12.4.min.js"></script>
    <script src="../../js/index.js"></script>
    <script src="../../js/common.js"></script>


    <script>
        layui.use('table', function () {
            let table = layui.table;
            let form=layui.form;
            table.render({
                elem: '#stus',
                url: '/api/User' //数据接口
                    ,
                page: true //开启分页
                    ,
                cols: [
                    [{
                            field: 'mobile',
                            title: '手机|账号'
                        },
                        {
                            field: 'pwd',
                            title: '密码',
                            edit: "text",
                            templet: `<div>
                            ****************
                            </div>`,
                        },
                        {
                            field: 'isAdmin',
                            title: '管理员',
                            templet: '#swicthTp',
                            sort: true,
                        }, {
                            field: 'createTime',
                            title: '注册/添加时间',
                            templet: `
                        <div>
                            {{=dateFormat(d.createTime)}}    
                        </div>
                        `,
                            sort: true
                        },
                        {

                            title: "操作",
                            templet: `
                            <div class="layui-btn-group">
                                <button class="layui-btn layui-btn-sm" onclick=edit("{{d._id}}")>
                                    <i class="layui-icon">&#xe642;</i>
                                </button>
                                <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="delCourse('{{d._id}}', this)">
                                    <i class="layui-icon">&#xe640;</i>
                                </button>
                            </div>
                              `
                        }
                    ]
                ]
            });
            //设置开关按钮
            form.on('switch(isAdmin)', function (obj) {
                console.log(obj)
                console.log(obj.elem)
                console.log(obj.elem.checked)
              const abc=  $.ajax({
                    url: "/api/User/isAdmin/" + obj.value,
                    method: "put",
                    data: {
                        isAdmin: obj.elem.checked
                    }
                })
                console.log(abc);
            })

        });


        $("#btnSubmit").click(function () {
            const key = $("#txtKey").val();
            layui.table.reload("stus", {
                where: {
                    key,
                    page: 1,
                },
                page: {
                    curr: 1 //重新设置第一页
                }
            });
        })
        //重置
        $("#btnReset").click(function () {
            $("#txtKey").val("");
            $("#btnSubmit").click();
        })

        function delCourse(id, btn) {
            layer.confirm('确定删除吗？', {
                icon: 3,
                title: '提示'
            }, function (index) {
                $.ajax({
                    url: "/api/User/" + id,
                    method: "delete"
                });
                $(btn).parents("tr").remove();
                layer.close(index);
            });
        }

        let addstu = document.getElementById("addstu");
        addstu.onclick = function () {
            location.href = "./add.html";
        }

        function edit(id) {  
            // console.log(id)
            location.href = "./edit.html?id=" + id;
        }
    </script>

    <script type="textml" id="swicthTp">
        <input type="checkbox" name="isAdmin" value="{{d._id}}" lay-skin="switch" lay-text="是|否" lay-filter="isAdmin" data-filter="isAdmin" {{d.isAdmin == true ? 'checked' : ''}} >
</script>


</body>

</html>